<div id="user_manage">
    <div class="user_manage">
        <el-row class="table_search">
            <el-col :span="12">
                <template>
                    <el-input
                            style="font-size: 12px"
                            id="seachInfoBox"
                            placeholder="请输入关键字搜索"
                            v-model.trim="parameters.inputVar"
                            @blur="searchInfo"
                            clearable>
                    </el-input>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
        </el-row>

        <el-row class="table_btn addUserBox ">
            <el-col :span="24" class="text-r">
                <el-button type="primary" @click="addUser" icon="el-icon-plus" class="addUsrtBtn">新增操作员</el-button>
            </el-col>
        </el-row>
        <template>
            <el-table
                    size="mini"
                    @row-click="goUserDetails"
                    @cell-mouse-enter="userMouseEnterEvent"
                    v-loading="loading"
                    :data="tableData"
                    style="width: 100%"
                    class="userManageBox">
                <el-table-column
                        align="center"
                        prop="nickname"
                        label="用户姓名"
                        width="190">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="usercode"
                        label="用户名"
                        width="190">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="190"
                        prop="roleName"
                        label="用户角色">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="160"
                        prop="status"
                        :formatter="getStatus"
                        label="用户状态">
                </el-table-column>
                <el-table-column label="操作" align="center" width="auto">
                    <template slot-scope="scope">
                        <el-button type="primary"  size="mini" @click="editRow(scope.$index, scope.row)" class="editBtn">修改</el-button>
                        <el-button type="danger" size="mini" @click="deleteRow(scope.$index, scope.row)" class="delBtn">删除</el-button>
                        <el-button type="danger"  size="mini" @click="resetMima(scope.$index, scope.row)" class="resetBtn">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block footerBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :current-page.sync="currentPage"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>

    </div>
    <!--新增弹出框-->
    <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
    <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="新增用户" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogAddFormVisible" class="edit_dialog" :before-close="closeAddDown">
        <span class="delDialogBtn" @click="closeAddDialogUser">x</span>
        <el-form
                class="edit-template-form"
                ref="addForm"
                :rules="rules"
                :model="addForm"
                label-width="140px"
                :label-position="labelPosition">
            <el-form-item label="请选择机构：" prop="jigouSel">
                <!--<el-input-->
                        <!--placeholder="请选择机构"-->
                        <!--onclick="addShowMenu();"-->
                        <!--v-model="addForm.jigouSel"-->
                        <!--id="addCitySel" style="width: 60%">-->
                <!--</el-input>-->
                <input
                        type="text"
                        onclick="addShowMenu();"
                        v-model="addForm.jigouSel"
                        style="width: 60%"
                        name="title"
                        required
                        readonly
                        lay-verify="required"
                        autocomplete="off"
                        class="layui-input"
                        id="addCitySel">

                <div id="addMenuContent" class="menuContent" style="width:60%;display:none; position: absolute;z-index: 10000;overflow: auto;">
                    <ul id="addTreeDemo123" class="ztree" style="margin-top:0;"></ul>
                </div>
            </el-form-item>

            <el-form-item label="请选择所属角色：" prop="selRole">
                <el-select v-model="addForm.selRole" placeholder="请选择角色" style="width: 60%;">
                    <el-option label="请选择角色" value=""></el-option>
                    <el-option v-for="item in roleData" :label="item.roleName" :value="item.roleId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请输入用户名：" prop="add_user_name" ref="addUserName">
                <!--<el-input v-model="addForm.add_user_name" placeholder="用户名不可输入汉字" @keyup.native="repeacInfo" @change="isRepetName($event)" style="width: 60%;"></el-input>-->
                <input type="text" v-model="addForm.add_user_name" style="width: 60%;" name="title" @keyup="repeacInfo" required lay-verify="required" @change="isRepetName($event)" placeholder="请输入标题" autocomplete="off" class="layui-input">
                <span class="errorBox2333" v-show="showisRepet">{{isRepetInfo}}</span>
            </el-form-item>

            <el-form-item label="请输入用户姓名：" prop="add_nick_name">
                <!--<el-input v-model="addForm.add_nick_name" style="width: 60%;"></el-input>-->
                <input type="text" v-model="addForm.add_nick_name" style="width: 60%;"   required lay-verify="required" autocomplete="off" class="layui-input">
            </el-form-item>

            <el-form-item label="请输入手机号码：" prop="" class="phoneNumBox">
                <el-input type="number" v-model="addForm.add_user_phone" @change="isRightPhone" style="width: 60%;"></el-input>
                <span class="errorBox" v-show="showPhone">请输入正确的手机号码</span>
            </el-form-item>


            <el-form-item label="请输入邮箱：" prop="" class="emailBox">
                <el-input v-model="addForm.add_user_emain" @change="isRightEmail" style="width: 60%;"></el-input>
                <span class="errorBox" v-show="showEmail">请输入正确的邮箱号码</span>
            </el-form-item>
            <!--按钮模板-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddDialog('addForm')">取 消</el-button>
            <el-button type="primary" @click="sendAddData">确 定</el-button>
        </div>
    </el-dialog>

    <!--编辑弹出框-->
    <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="修改用户" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogEditFormVisible" class="edit_dialog">
        <span class="delDialogBtn" @click="closeAddDialogUser">x</span>
        <el-form
                class="edit-template-form"
                ref="form1"
                :rules="rules1"
                :model="form1"
                v-model="form1"
                label-width="140px"
                :label-position="labelPosition">
            <el-form-item label="请选择机构：" prop="" id="selManage">
                <!--<el-input-->
                        <!--placeholder="请选择机构"-->
                        <!--onclick="showMenu();"-->
                        <!--v-model="testZtree"-->
                        <!--readonly-->
                        <!--id="citySel" style="width: 60%">-->
                <!--</el-input>-->
                <input
                        type="text"
                        onclick="showMenu();"
                        v-model="testZtree"
                        style="width: 60%"
                        name="title"
                        required
                        readonly
                        lay-verify="required"
                        autocomplete="off"
                        class="layui-input"
                        id="citySel">
                <span class="errorBox"  v-show="isJigou">请选择机构</span>
                <div id="menuContent" class="menuContent" style="width:60%;display:none; position: absolute;z-index: 1000;overflow: auto;">
                    <ul id="treeDemo123" class="ztree" style="margin-top:0;"></ul>
                </div>

            </el-form-item>

            <el-form-item label="请选择所属角色：" prop="editSel">
                <el-select v-model="form1.editSel" placeholder="请选择角色" style="width: 60%;">
                    <el-option label="请选择角色" value=""></el-option>
                    <el-option v-for="todo in roleData" :label="todo.roleName" :value="todo.roleId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请输入用户名：" prop="edit_user_name" ref="editUserName">
                <el-input v-model="form1.edit_user_name" readonly  @change="isRepetEdit" style="width: 60%;"></el-input>
                <span class="errorBox2333" v-show="showisRepetEdit">{{isRepetEditInfo}}</span>
            </el-form-item>

            <el-form-item label="请输入用户姓名：" prop="edit_nick_name">
                <!--<el-input v-model="form1.edit_nick_name" style="width: 60%;"></el-input>-->
                <input type="text" v-model="form1.edit_nick_name" style="width: 60%;"   required lay-verify="required" autocomplete="off" class="layui-input">

            </el-form-item>

            <el-form-item label="请输入手机号码：" prop="" class="phoneNumBox">
                <el-input type="number" v-model="form1.edit_user_phone" @change="isEditRightPhone" style="width: 60%;"></el-input>
                <span class="errorBox" v-show="showPhoneEdit">请输入正确的手机号码</span>
            </el-form-item>

            <el-form-item label="请输入邮箱：" prop="" class="emailBox">
                <el-input v-model="form1.edit_user_emain" @change="isRightEmailEdit" style="width: 60%;"></el-input>
                <span class="errorBox" v-show="showEmailEdit">请输入正确的邮箱号码</span>
            </el-form-item>
            <!--按钮模板-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="backHome">取 消</el-button>
            <el-button type="primary" @click="sendEditData">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="用户详情" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogDetailsFormVisible" class="dialogDetails">
        <span class="delDialogBtn" @click="closeAddDialogUser">x</span>
        <div class="info-template-content">
            <el-row class="item-row">
                <el-col :span="4" >用户名</el-col>
                <el-col :span="18">{{detailsForm.username}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="4" >用户姓名</el-col>
                <el-col :span="18" >{{detailsForm.nickname}}</el-col>
            </el-row>

            <el-row class="item-row">
                <el-col :span="4" >用户角色</el-col>
                <el-col :span="18">{{detailsForm.roleName}}</el-col>
            </el-row>
            <el-row class="item-row" >
                <el-col :span="4" >手机号码</el-col>
                <el-col :span="18">{{detailsForm.phone}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="4" >邮箱</el-col>
                <el-col :span="18" >{{detailsForm.email}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="4" >状态</el-col>

                <el-col :span="18" v-if="detailsForm.status == '正常'" style="color: #409EFF">{{detailsForm.status}}</el-col>
                <el-col :span="18" v-else  style="color: #ff4444">{{detailsForm.status}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="4" >所属单位</el-col>
                <el-col :span="18">{{detailsForm.company}}</el-col>
            </el-row>

        </div>
        <!--<div slot="footer" class="dialog-footer">-->
        <!--<el-button @click="dialogDetailsFormVisible = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="dialogDetailsFormVisible = false">确 定</el-button>-->
        <!--</div>-->
    </el-dialog>
</div>
</body>
</html>

<script>
    $(function () {
        placeHolde("#seachInfoBox","请输入关键字搜索")
    });

    var layer,
        loadUser;
    layui.use('layer', function(){
        layer = layui.layer;
        loadUser  = layer.load(1, {shade: [0.5, '#000']});

    });

    //新增弹出框树状结构addSetting   addCitySel  addCitySel  addMenuContent
    var addSetting = {
        check: {
            enable: true,

        },
        data: {
            simpleData: {
                enable: true,
                rootPId: 0
            }
        },
        callback: {
            beforeClick: addBeforeClick,
            onCheck: addOnCheck
        }
    };
    var zNodes1 = [];
    function addBeforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("addTreeDemo123");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    var totalNodes;
    var addNodes1;
    function addOnCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("addTreeDemo123"),
            nodes1 = zTree.getCheckedNodes(true),
            selAll = [],
            v = "";
        for (var i=0, l=nodes1.length; i<l; i++) {
            v += nodes1[i].name + ",";
            if(!nodes1[i].isParent){
                selAll.push(nodes1[i].id)
            }
        }


        if (v.length > 0 ) v = v.substring(0, v.length-1);
        var cityObj1 = $("#addCitySel");
        //cityObj1.attr("value", v);
        totalNodes = selAll;
        addNodes1 = nodes1;
        user_manage.addForm.jigouSel = v;
    }

    function addShowMenu() {
        var cityObj = $("#addCitySel");
        var cityOffset = $("#addCitySel").offset();
        $("#addMenuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
            user_manage.treeArr = json.t;
//            zNodes1 = json.t;
//            var treeObj = $.fn.zTree.init($("#addTreeDemo123"), addSetting, zNodes1);
//            user_manage.addForm.jigouSel = '';
            //默认展开所有节点
            //treeObj.expandAll(true);
            var ztreeArr = new Array();
            ztreeArr = json.t;
            var treeObj = $.fn.zTree.init($("#addTreeDemo123"), addSetting, ztreeArr);
            user_manage.addForm.jigouSel = '';
//            $.post("${basePath}merchant/dept/togetFirstDept", function (json) {
//                var topObj = {};
//                ztreeArr[ztreeArr.length-1].pId = json.t.deptId;
//                topObj.id=json.t.deptId;
//                topObj.pId = json.t.superDeptId;
//                topObj.name = json.t.deptName;
//                ztreeArr.push(topObj);
//                var treeObj = $.fn.zTree.init($("#addTreeDemo123"), addSetting, ztreeArr);
//                //treeObj.expandAll(true);
//                user_manage.addForm.jigouSel = '';
//            });
        });
        //$.fn.zTree.init($("#treeDemo123"), setting, zNodes);
        $("body").bind("mousedown", addOnBodyDown);
    }
    function addHideMenu() {
        $("#addMenuContent").fadeOut("fast");
        $("body").unbind("mousedown", addOnBodyDown);
    }
    function addOnBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "addCitySel" || event.target.id == "addMenuContent" || $(event.target).parents("#addMenuContent").length>0)) {
            addHideMenu();
        }
    }
    //新增弹出框树结构结束
    //编辑弹出框树结构开始
    var setting = {
        check: {
            enable: true,
        },
        data: {
            simpleData: {
                enable: true,
                rootPId: 0
            }
        },
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }
    };
    var zNodes = [];
    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo123");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    var totalNodes2;
    var editNodes;
    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo123"),
            nodes = zTree.getCheckedNodes(true),
            selAll1=[],
            v = "";
        for (var i=0, l=nodes.length; i<l; i++) {
            v += nodes[i].name + ",";
            if(!nodes[i].isParent){
                selAll1.push(nodes[i].id)
            }
        }
        if (v.length > 0 ) v = v.substring(0, v.length-1);
        var cityObj = $("#citySel");
        //cityObj.attr("value", v);
        totalNodes2 = selAll1;
        editNodes = nodes;
        user_manage.testZtree = v;
        if(user_manage.testZtree == ''){
            user_manage.isJigou = true;
        }else {
            user_manage.isJigou = false;
        }

    }
    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {


            //默认展开所有节点
            //treeObj.expandAll(true);
            var ztreeArr1 = new Array();
            ztreeArr1 = json.t;
            var treeObj = $.fn.zTree.init($("#treeDemo123"), setting, ztreeArr1);
//            $.post("${basePath}merchant/dept/togetFirstDept", function (json) {
//                var topObj = {};
//                ztreeArr1[ztreeArr1.length-1].pId = json.t.deptId;
//                topObj.id=json.t.deptId;
//                topObj.pId = json.t.superDeptId;
//                topObj.name = json.t.deptName;
//                ztreeArr1.push(topObj);
//                var treeObj = $.fn.zTree.init($("#treeDemo123"), setting, ztreeArr1);
//                //treeObj.expandAll(true);
//            });
        });
        //$.fn.zTree.init($("#treeDemo123"), setting, zNodes);
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }


    //编辑弹出框  树结构结束
    var user_manage =
        new Vue({
            el: "#user_manage",
            data: {
                isShowingBox:false,
                showDelBtn:false,
                modalAble:false,
                escAble:false,
                treeArr :'',
                isRepetEditInfo:'',
                showisRepetEdit:false,
                isRepetInfo:'',
                showisRepet:false,
                showEmail:false,
                showEmailEdit:false,
                showPhone:false,
                showPhoneEdit:false,
                ismodalClose:false,
                loading:false,
                // inputVar: '',
                isJigou:false,
                testZtree:'',
                isJigou:false,
                tableData:[],
                roleData:[],
                currentPage: 1,
                pageSize:10,
                labelPosition:'left',
                dialogAddFormVisible: false,
                addForm: {                          //增加用户数据
                    selRole:'',
                    add_user_role:'',
                    add_nick_name:'',
                    add_user_name:'',
                    add_user_phone:'',
                    add_user_emain:'',
                    jigouSel:''
                },
                rules: {
                    selRole: [
                        { required: true, message: '请选择用户角色', trigger: 'change' }
                    ],
                    add_user_role: [
                        { required: true, message: '请选择用户角色', trigger: 'blur' }
                    ],
                    add_nick_name: [
                        { required: true, message: '请输入用户姓名', trigger: 'blur' }
                    ],
                    add_user_name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { max: 16, message: '长度在 16 个字符以内', trigger: 'blur' }
                    ],
                    add_user_phone: [
                        { required: true, message: '请填写项目描述', trigger: 'blur' }
                    ],
                    add_user_emain: [
                        { required: true, message: '请选择所属角色', trigger: 'blur' }
                    ],
                    jigouSel: [
                        { required: true, message: '请选择机构', trigger: 'blur' }
                    ]
                },                          //增加用户表单验证
                formLabelWidth: 'auto',

                dialogEditFormVisible: false,
                form1: {                               //编辑用户弹出框数据
                    editSel:'',
                    edit_jigou:'',
                    edit_user_role:'',
                    edit_nick_name:'',
                    edit_user_name:'',
                    edit_user_phone:'',
                    edit_user_emain:'',
                },
                rules1: {
                    editSel: [
                        { required: true, message: '请选择用户角色', trigger: 'change' }
                    ],
                    edit_user_role: [
                        { required: true, message: '请选择用户角色', trigger: 'blur' }
                    ],
                    edit_nick_name: [
                        { required: true, message: '请输入用户姓名', trigger: 'blur' }
                    ],
                    edit_user_name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    edit_user_phone: [
                        { required: true, message: '请填写项目描述', trigger: 'blur' }
                    ],
                    edit_user_emain: [
                        { required: true, message: '请选择所属角色', trigger: 'blur' }
                    ],
                    edit_jigou: [
                        { required: true, trigger: 'change'}
                    ]
                },
                editDeptId:[],
                //编辑用户弹出框 验证
                dialogDetailsFormVisible: false,
                detailsForm: {
                    username:'',
                    nickname:'',
                    phone: '',
                    roleName: '',
                    status: '',
                    email: '',
                    company:''
                },
                formLabelWidth: '120px',
                totalCount:'',
                totalPage:'',
                parameters:{
                    'status':'',
                    'currentPage':'',
                    'inputVar' : '',
                    'search':'1'
                },
                currentPage: 1,
                pageSize:10,
            },
            methods: {
                backHome:function () {
                    this.closeAddDialogUser();
                    this.isShowingBox = false;
                    this.dialogEditFormVisible = false
                },
                /**
                 * 点击X关闭模态框
                 * */
                closeAddDialogUser:function () {
                    this.isShowingBox = false;
                    if(user_manage.dialogAddFormVisible){
                        user_manage.dialogAddFormVisible = false;
                        user_manage.$refs.addForm.resetFields();
                    }else if(user_manage.dialogEditFormVisible){
                        user_manage.dialogEditFormVisible = false;
                        user_manage.$refs.form1.resetFields();
                    }else if(user_manage.dialogDetailsFormVisible){
                        user_manage.dialogDetailsFormVisible = false;
                    }
                },
                repeacInfo:function(){
                    this.addForm.add_user_name=this.addForm.add_user_name.replace(/[^\x00-\x80]/gi,'');
                },
                closeAddDown:function(done){
                    //this.$refs[formName].clearValidate();
                    done();
                },
                isRepetEdit:function(){
                    var that = this;
                    var RepetNameBox1 = this.$refs['editUserName'].$el;
                    var options= {
                        userCode:this.form1.edit_user_name
                    };
                    if(this.form1.edit_user_name){
                        sendService('${basePath}/merchant/user/haveUser', options, function (resData) {
                            if(resData.status == 'success'){
                                that.isRepetEditInfo = '';
                                that.showisRepetEdit = false;
                            }else {
                                var oldEditName =  sessionStorage.editUserName;
                                if(that.form1.edit_user_name != oldEditName){
                                    $(RepetNameBox1).removeClass('is-success');
                                    that.showisRepetEdit = true;
                                    that.isRepetEditInfo = '用户名已被注册！';
                                }else {
                                    that.isRepetEditInfo = '';
                                    that.showisRepetEdit = false;
                                }
                            }
                        });
                    }else {
                        that.isRepetEditInfo = '';
                        that.showisRepetEdit = false;
                    }
                },
                isRepetName:function(){
                    var that = this;
                    var RepetNameBox = this.$refs['addUserName'].$el;
                    var options= {
                        userCode:this.addForm.add_user_name
                    };
                    if(this.addForm.add_user_name){
                        sendService('${basePath}/merchant/user/haveUser', options, function (resData) {
                            if(resData.status == 'success'){
                                that.isRepetInfo = '';
                                that.showisRepet = false;
                            }else {
                                $(RepetNameBox).removeClass('is-success');
                                that.showisRepet = true;
                                that.isRepetInfo = '用户名已被注册！';
                            }
                        });
                    }else {
                        that.isRepetInfo = '';
                        that.showisRepet = false;
                    }

                },
                closeAddDialog:function(formName){
                    this.isShowingBox = false;
                    this.dialogAddFormVisible = false;
//                    this.$refs[formName].resetFields();
                    this.$refs[formName].clearValidate();
                },
                /**
                 * 编辑用户 给后台传递数据
                 */
                sendEditData:function () {

                    var that = this;
                    if(this.testZtree == ""||this.form1.editSel == ""||this.form1.editSel == null||this.form1.edit_nick_name == ""||this.form1.edit_user_name == ''){
//                        this.$message({
//                            message: '必填项目不能为空!',
//                            type: 'warning'
//                        });
                        layer.msg('必填项目不能为空!', {icon: 2});
                        return
                    }else if(this.showisRepetEdit){
//                        this.$message({
//                            message: '用户名已被注册，请重新输入！',
//                            type: 'warning'
//                        });
                        layer.msg('用户名已被注册，请重新输入！', {icon: 2});
                        return
                    }else {
                        var editLoding  = layer.load(1, {shade: [0.5, '#000']});
                        this.isShowingBox = false;
                        this.dialogEditFormVisible = false;
                        var arr2 = new Array();
                        var editZtreeId = new Array();
                        if(editNodes){
                            for(var k = 0;k < editNodes.length;k++){
                                editZtreeId.push(editNodes[k].id);
                            }
                        }else {
                            editZtreeId = this.editDeptId;
                        }
                        var editZtreeIdStr = editZtreeId.join(",");
                        if(totalNodes2){
                            arr2 = totalNodes2
                        }
                        var arrStr = arr2.join(",")

                        var option4= {
                            nickname:this.form1.edit_nick_name,
                            usercode:this.form1.edit_user_name,
                            email:this.form1.edit_user_emain,
                            phone:this.form1.edit_user_phone,
                            userid:this.form1.edit_user_id,
                            roleid:this.form1.editSel,
                            treeInfo:arrStr,
                            treeId:editZtreeIdStr
                        };

                        sendService('${basePath}merchant/user/userUpdate', option4, function (resData) {
                            if(resData.status == 'success'){
//                                that.$message({
//                                    type: 'success',
//                                    message: resData.msg
//                                });
                                layer.msg(resData.msg, {icon: 6});
                                layer.close(editLoding);
                                reloadPage('${basePath}merchant/user/getEmplistPage');

                            }else {

                                layer.msg(resData.msg, {icon: 2});
                                reloadPage('${basePath}merchant/user/getEmplistPage');
                            }
                        })
                    }


                },
                /**
                 * 增加用户  发送数据给后台
                 */
                sendAddData:function () {
                    var that = this;
                    if(this.treeArr){
                        if(this.treeArr.length < 2){

//                            that.$message({
//                                type: 'warning',
//                                message: '请先添加机构'
//                            });
                            layer.msg('请先添加机构!', {icon: 2});
                            return
                        }
                    }
                    if($("#addCitySel").val() == ""||this.addForm.selRole == ""||this.addForm.add_nick_name == "" || this.addForm.add_user_name == ""){
//                        this.$message({
//                            message: '必填项目不能为空!',
//                            type: 'warning'
//                        });
                        layer.msg('必填项目不能为空!', {icon: 2});
                        return
                    }else if(this.showisRepet){
//                        this.$message({
//                            message: '用户名已被注册，请重新输入！',
//                            type: 'warning'
//                        });
                        layer.msg('用户名已被注册，请重新输入!', {icon: 2});
                        return
                    }else {
                        var editLoding  = layer.load(1, {shade: [0.5, '#000']});
                        this.isShowingBox = false;
                        this.dialogAddFormVisible = false;
                        var arr1 = new Array();
                        var sendZtreeId = new Array();
                        for(var j =0;j < addNodes1.length;j++){
                            sendZtreeId.push(addNodes1[j].id)
                        }
                        var sendZtreeIdStr = sendZtreeId.join(",");
                        if(totalNodes){
                            var arr1Str = totalNodes.join(',');
                        }
                        var option7= {
                            jigou:$("#addCitySel").val(),
                            nickname:this.addForm.add_nick_name,
                            usercode:this.addForm.add_user_name,
                            email:this.addForm.add_user_emain,
                            phone:this.addForm.add_user_phone,
                            roleid:this.addForm.selRole,
                            treeInfo:arr1Str,
                            treeId:sendZtreeIdStr
                        };

                        sendService('${basePath}/merchant/user/save', option7, function (resData) {
                            if(resData.status == 'success'){
//                                that.loading=false;
//                                that.$message({
//                                    type: 'success',
//                                    message: resData.msg
//                                });
                                layer.close(editLoding);
                                layer.msg(resData.msg, {icon: 6});
                                reloadPage('${basePath}merchant/user/getEmplistPage');
                            }else {
                                layer.msg(resData.msg, {icon: 2});
                                reloadPage('${basePath}merchant/user/getEmplistPage');
                            }
                        })
                    }



                },
                /**
                 * 点击编辑用户  回填数据
                 * @param index
                 * @param row
                 */
                editRow:function (index,row) {
                    this.isShowingBox = true;
                    this.dialogEditFormVisible = true;
                    //console.log(this.form1.editSel);
                    var option21= {
                        roleId:row.roleid,
                        userid:row.userid
                    };
                    sendService('${basePath}/merchant/user/touserUpdate', option21, function (resData) {
                        if(resData.status == 'success'){
                            console.log(resData)
                            var resDataArr = resData.t.rolelist;
                            var deptNameArr = resData.t.deptNamelist;
                            deptNameArr.unshift(deptNameArr.pop());
                            var resDataDeptIdArr = resData.t.deptlist;
                            user_manage.testZtree = deptNameArr.join(",");
                            for(var i = 0;i<resDataDeptIdArr.length;i++){
                                user_manage.editDeptId.push(resDataDeptIdArr[i]);
                            }
                        }
                    });

                    this.form1 = {
                        edit_user_id:row.userid,
                        edit_role_name:row.roleName,
                        edit_nick_name:row.nickname,
                        edit_user_name:row.usercode,
                        edit_user_phone:row.phone,
                        edit_user_emain:row.email,
                        editSel:row.roleid
                    };
                    sessionStorage.editUserName = this.form1.edit_user_name;
                },
                goPage: function (url) {
                    window.location.href= '${basePath}'+url;
                },
                handleSizeChange: function (size) {
                    this.pageSize = size;
                },
                handleCurrentChange: function(currentPage){
//                    this.currentPage = currentPage;
                    Pagesearch(this,'${basePath}/merchant/user/getUserlistPage', this.parameters,currentPage,function (resData) {
                        if(resData.status == 'success'){
                            this.tableData = resData.t;
                        }
                    });
                },
                /**
                 * 前往用户详情页面
                 * @param row
                 * @param event
                 * @param column
                 */
                goUserDetails:function(row, event, column){
                    if(column.label != '操作'){
                        this.isShowingBox = true;
                        this.dialogDetailsFormVisible = true;
                        this.detailsForm.nickname=row.nickname;
                        this.detailsForm.username=row.usercode;
                        this.detailsForm.phone= row.phone;
                        this.detailsForm.roleName= row.roleName;
                        this.detailsForm.status= this.getStatus(row);
                        this.detailsForm.email= row.email;

                    }
                    if(column.label == '操作'){
                        return
                    }
                },
                userMouseEnterEvent:function(row, event, column){
                    if(event.label == '操作'){
                        column.style.cursor="default"
                    }
                    if(event.label != '操作'){
                        column.style.cursor="pointer"
                    }
                },
                searchFun:function(){
                    Pagesearch(this,'${basePath}/merchant/user/getUserlistPage', this.parameters,1,function (resData) {
                        if(resData.status == 'success'){
                            //this.tableData = resData.t;
                            //console.log(resData)
                        }
                    });
                },
                searchInfo:function(){
                    if(this.parameters.inputVar == ''){
                        Pagesearch(this,'${basePath}/merchant/user/getUserlistPage', this.parameters,1,function (resData) {
                            if(resData.status == 'success'){

                            }
                        });
                    }
                },
                addUser:function(){
                    var that = this;
                    setTimeout(function () {
//                        that.$refs['addForm'].resetFields();
                        that.isRepetInfo = '';
                        that.showisRepet = false;
                    },0);
                    this.isShowingBox = true;
                    this.dialogAddFormVisible = true;
                    this.addForm.selRole='';
                    this.addForm.add_user_role='';
                    this.addForm.add_nick_name='';
                    this.addForm.add_user_name='';
                    this.addForm.add_user_phone='';
                    this.addForm.add_user_emain='';
                },
                /**
                 * 删除一行 用户数据
                 * @param index
                 * @param row
                 */
                deleteRow:function(index, row) {
                    var that = this;
                    var indexing1 = index;
                    var userid = row.userid;
                    var msg = confirm('确认删除此用户吗？');
                    if(msg){
                        var editLoding  = layer.load(1, {shade: [0.5, '#000']});
                        var option1= {userid:userid};
                        sendService('${basePath}/system/user/deleteSysUser', option1, function (resData) {
                            if(resData.status == 'success'){
//                                that.$message({
//                                    type: 'success',
//                                    message: resData.msg
//                                });
                                layer.close(editLoding);
                                layer.msg(resData.msg, {icon: 6});
                                reloadPage('${basePath}merchant/user/getEmplistPage');
                            }else {
                                layer.close(editLoding);
                                layer.msg(resData.msg, {icon: 2});
                                //reloadPage('${basePath}merchant/user/getEmplistPage');
                            }
                        })
                    }
//                    this.$confirm('确认删除此用户吗？','提示', {
//                        confirmButtonText: '确定',
//                        cancelButtonText: '取消',
//                        type: 'warning'
//                    }).then(function () {
//                        //that.tableData.splice(indexing1, 1)
//                        var option1= {userid:userid};
//                        sendService('${basePath}/system/user/deleteSysUser', option1, function (resData) {
//                            if(resData.status == 'success'){
//                                that.$message({
//                                    type: 'success',
//                                    message: resData.msg
//                                });
//                                reloadPage('${basePath}merchant/user/getEmplistPage');
//                            }else {
//                                that.$message.error(resData.msg);
//                                reloadPage('${basePath}merchant/user/getEmplistPage');
//                            }
//                        })
//
//                    }).catch(function () {
//                        that.$message({
//                            type: 'info',
//                            message: '已取消删除'
//                        });
//                    })

                },
                /**
                 * 重置密码 函数
                 * @param index
                 * @param row
                 */
                resetMima:function(index, row) {
                    var that = this;
                    var msg1 = confirm('确认要重置密码吗？');
                    if(msg1){
                        var option3= {nickname:row.nickname,userid:row.userid};
                        sendService('${basePath}/system/user/updatePassword', option3, function (resData) {
                            if(resData.status == 'success'){
//                                that.$message({
//                                    type: 'success',
//                                    message: resData.msg});
                                layer.msg(resData.msg, {icon: 6});
                            }else {
                                layer.msg(resData.msg, {icon: 2});
//                                that.$message.error(resData.msg);
                            }
                        })
                    }
//                    this.$confirm('确认要重置密码吗？','提示', {
//                        confirmButtonText: '确定',
//                        cancelButtonText: '取消',
//                        type: 'warning'
//                    }).then(function () {
//                        var option3= {nickname:row.nickname,userid:row.userid};
//                        sendService('${basePath}/system/user/updatePassword', option3, function (resData) {
//                            if(resData.status == 'success'){
//                                that.$message({
//                                    type: 'success',
//                                    message: resData.msg});
//
//                            }else {
//                                that.$message.error(resData.msg);
//                            }
//                        })
//                    }).catch(function () {
//                        that.$message({
//                            type: 'info',
//                            message: '取消重置'
//                        });
//                    })

                },
                /**
                 * 格式化用户状态函数
                 * @param row
                 * @param column
                 * @returns {*}
                 */
                getStatus:function(row){
                    var status = row.status;
                    if(status == '01'){
                        return '未审核'
                    }else if(status == '02'){
                        return '正常'
                    }else if(status == '03'){
                        return '禁用'
                    }else {
                        return ''
                    }


                },
                handleChange:function(value) {
                    console.log(value);
                },
                isRightPhone:function(){
                    if(this.addForm.add_user_phone != ''){
                        if(!(/^1[34578]\d{9}$/.test(this.addForm.add_user_phone))){
                            this.showPhone = true;
                        }else {
                            this.showPhone = false;
                        }
                    }else {
                        this.showPhone = false;
                    }
                },
                isEditRightPhone:function(){
                    if(this.form1.edit_user_phone != ''){
                        if(!(/^1[34578]\d{9}$/.test(this.form1.edit_user_phone))){
                            this.showPhoneEdit = true;
                        }else {
                            this.showPhoneEdit = false;
                        }
                    }else {
                        this.showPhoneEdit = false;
                    }
                },
                isRightEmail:function(){
                    if(this.addForm.add_user_emain != ''){
                        if(!(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.addForm.add_user_emain))){
                            this.showEmail = true;
                        }else {
                            this.showEmail = false;
                        }
                    }else {
                        this.showEmail = false;
                    }
                },
                isRightEmailEdit:function(){
                    if(this.form1.edit_user_emain != ''){
                        if(!(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.form1.edit_user_emain))){
                            this.showEmailEdit = true;
                        }else {
                            this.showEmailEdit = false;
                        }
                    }else {
                        this.showEmailEdit = false;
                    }
                }
            },
            created: function () {
//                var options= {};
//                sendService('${basePath}/merchant/user/getUserlistPage', options, function (resData) {
//                    if(resData.status == 'success'){
//                        //payFee_save.feeUserList = resData.t;  merchant/user/getUserlistPage
//                        user_manage.tableData = resData.t;
//                    }
//                });

                var option21= {
                    roleId:972,
                    userid:681
                };
                sendService('${basePath}/merchant/user/touserUpdate', option21, function (resData) {
                    if(resData.status == 'success'){
                        user_manage.detailsForm.company = resData.t.corpName;
                        var resDataArr = resData.t.rolelist;
                        if(resDataArr){
                            for(var z = 0;z < resDataArr.length;z++){
                                var roleObj ={};
                                roleObj.roleName = resDataArr[z].roleName;
                                roleObj.roleId = resDataArr[z].roleId;
                                user_manage.roleData.push(roleObj)
                            }
                        };


                    }
                });

                //
                Pagesearch(this,'${basePath}/merchant/user/getUserlistPage', null,1,function (resData) {
                    if(resData.status == 'success'){
                        //loading.close();
                        layer.close(loadUser);
                    }
                });
            },
            computed:{
                isOverflow:function () {
                    if(this.isShowingBox){
                        $(".main-right").css({'overflow':"hidden"});
                    }
                    if(!this.isShowingBox){

                        $(".main-right").css({'overflow':"auto"});
                    }

                }
            }
        });
</script>

<style scoped>
    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    /*table按钮样式调整开始*/
    .el-button--mini, .el-button--mini.is-round{
        padding: 4px 10px;
    }
    .userManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }

    .userManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .userManageBox .resetBtn{
        color: #02dda7;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .resetBtn:hover{
        color: #fff;
        background-color: #02dda7;
        border-color: #02dda7;
    }
    .userManageBox .el-button{
        margin-left: 0;
    }
    /*table按钮样式调整结束*/
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    /*.el-table td, .el-table th.is-leaf{*/
    /*border: none;*/
    /*}*/
    .el-table::before{
        height: 0;
    }
    .addUserBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }

    .add-template-form > div{
        margin-left: 45px;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    #menuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #fff;
        border: 1px solid #fff;
    }
    .edit-template-form > div{
        margin-left: 45px;
    }
    /*.edit_dialog .el-form-item.is-required .el-form-item__label:before{*/
    /*content: '';*/
    /*}*/
    #addMenuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #fff;
        border: 1px solid #fff;
    }
    /*详情页样式*/
    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }
    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        /*height: 46px;*/
        line-height: 46px;
        font-size: 16px;
        padding-left: 60px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #666;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        padding-right: 10px;
    }
    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }
    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
    }
    /*.dialogDetails .el-dialog{*/
        /*overflow: hidden;*/
        /*-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);*/
        /*-moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);*/
        /*box-shadow: 0 0 16px rgba(0,0,0,0.5);*/
    /*}*/
    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #aaa;
        font-size: 22px;
    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
    .errorBox{
        color: #fa5555;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .errorBox2333{
        color: #fa5555;
        font-size: 12px;
    }
    /*#selManage label{*/
    /*position: relative;*/
    /*}*/
    #selManage label:before{
        content: '*';
        color: #fa5555;
        margin-right: 4px;
    }
</style>
